<template>
  <div id="app">
    <navigation>
      <router-view></router-view>
    </navigation>
    <van-tabbar class="tabbar"
      v-show="showTabbar"
      v-model="tabbarActive"
      active-color="#07c160"
    >
      <van-tabbar-item to="/arena"     icon="fire-o">擂台</van-tabbar-item>
      <van-tabbar-item to="/community" icon="friends-o">社区</van-tabbar-item>
      <van-tabbar-item to="/warehouse" icon="home-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    tabbarActive: {
      get: function () {
        return this.$store.state.tabbar.active
      },
      set: function () {
      }
    },
    showTabbar: function () {
      return this.$store.state.tabbar.isShow
    }
  }
}
</script>

<style lang="stylus">
  #app {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .van-tabbar
    height: 84px
    .van-tabbar-item
      font-size: 24px
    .van-tabbar-item__icon
      font-size: 48px
</style>
